<template>
	<view>

		<view class="install_item">
			<view style="display: flex;justify-content: space-between;">
				<view>预约时间：{{timestampToDateFormat(item.install_date)}}</view>
				<view style="color: orangered;font-weight: bold;">{{getStatusTxt(item.status)}}</view>
			</view>
			<view>安装型号：{{item.ts}}</view>
			<view>锁体型号：{{item.lock_ts}}</view>
			<view v-if="item.lock_img" style="display: flex;align-items: center;" @click.stop="onCheckImg(item.lock_img)">
				<view>锁体照片：</view>
				<image class="img_lock" :src="item.lock_img"></image>
				<view style="color: deepskyblue;font-weight: bold;">点击查看</view>
			</view>
			<view>客户地址：{{item.address}}</view>
			<view>客户电话：<span @click.stop="onPhone(item)" style="color: deepskyblue;text-decoration: underline;">{{item.mobile}} (点击拨打)</span></view>
			<view>客户要求：{{item.remark}}</view>
			<view>赠品：{{item.gift}}</view>
			<view>销售人员：{{item.salesperson}}</view>
			<view v-if="item.anzhuang && item.anzhuang.tel">安装人员：{{item.anzhuang.name || item.anzhuang.tel}}</view>
			<view>订单编号：{{item.dy_sn || '未填写'}}</view>
			<view v-if="item.status == 4 || item.status == 6" style="font-weight: bold;color: red;">
				拒绝原因：{{item.ye_yj || item.cw_yj}}
			</view>
			<view v-if="item.status == 99" style="font-weight: bold;color: red;">
				作废原因：{{item.cancel_text}}
			</view>

		</view>

		<view style="margin: 20rpx 0 0 40rpx;font-size: 36rpx;font-weight: bold;">安装照片</view>

		<view class="img_div">
			<image :src="img_url_0 || img_default" @click.stop="onUploadImg(0)"></image>
			<image :src="img_url_1 || img_default" @click.stop="onUploadImg(1)"></image>
			<image :src="img_url_2 || img_default" @click.stop="onUploadImg(2)"></image>
			<image :src="img_url_3 || img_default" @click.stop="onUploadImg(3)"></image>
		</view>

		<view style="display: flex;justify-content: space-evenly;margin: 10rpx 20rpx 20rpx 20rpx;font-size: 28rpx;">
			<view class="txt_item">安装前(内)</view>
			<view class="txt_item">安装前(外)</view>
			<view class="txt_item">安装后(内)</view>
			<view class="txt_item">安装后(外)</view>
		</view>

		<view class="img_div">
			<image :src="img_url_4 || img_default" @click.stop="onUploadImg(4)"></image>
			<image :src="img_url_5 || img_default" @click.stop="onUploadImg(5)"></image>
			<image :src="img_url_6 || img_default" @click.stop="onUploadImg(6)"></image>
			<image :src="img_url_7 || img_default" @click.stop="onUploadImg(7)"></image>
		</view>

		<view style="display: flex;justify-content: space-evenly;margin: 10rpx 20rpx 20rpx 20rpx;font-size: 28rpx;">
			<view class="txt_item">质保图</view>
			<view class="txt_item">赠品图</view>
			<view class="txt_item">核销图</view>
			<view class="txt_item">核销图</view>
		</view>

		<view>
			<view style="margin: 40rpx 0 0 40rpx;font-size: 36rpx;font-weight: bold;">用户评价</view>
			<view v-if="item.is_sign == 1" @click.stop="onCheckEvaluate()" style="margin: 20rpx 0 0 40rpx;font-size: 30rpx;display: flex;align-items: center;">
				*用户已对安装进行评价，
				<view style="color: orangered;font-weight: bold;">点击查看评价 ></view>
			</view>
			<view v-else style="margin: 20rpx 0 0 40rpx;font-size: 30rpx;color: orangered;font-weight: bold;">
				*用户尚未对安装进行评价！
			</view>
		</view>

		<view style="display: flex;width: 100%;margin: 20rpx 20rpx 0 20rpx;">
			<view class="app_item_div">
				<view class="app_item_title">销售单</view>
				<view class="app_img_div">
					<image class="img_sale_hexiao" :src="sales_img || img_default" @click.stop="onUploadImg(8)"></image>
					<view v-if="item.status == 2 || item.status == 6" class="app_upload_txt" @click.stop="onUploadSaleImg(1)">点击上传</view>
				</view>
			</view>

			<!-- 新增的销售单 -->
			<view class="app_item_div">
				<view class="app_item_title">销售单2</view>
				<view class="app_img_div">
					<image class="img_sale_hexiao" :src="sales1_img || img_default" @click.stop="onUploadImg(10)"></image>
					<view v-if="item.status == 2 || item.status == 6" class="app_upload_txt" @click.stop="onUploadSaleImg(2)">点击上传</view>
				</view>
			</view>

			<view class="app_item_div">
				<view class="app_item_title">核销图</view>
				<view class="app_img_div">
					<image class="img_sale_hexiao" :src="audit_img || img_default" @click.stop="onUploadImg(9)"></image>
					<view v-if="item.status == 2 || item.status == 6" class="app_upload_txt" @click.stop="onUploadAuditImg(1)">点击上传</view>
				</view>
			</view>

			<!-- 新增的核销图 -->
			<view class="app_item_div">
				<view class="app_item_title">核销图2</view>
				<view class="app_img_div">
					<image class="img_sale_hexiao" :src="audit1_img || img_default" @click.stop="onUploadImg(11)"></image>
					<view v-if="item.status == 2 || item.status == 6" class="app_upload_txt" @click.stop="onUploadAuditImg(2)">点击上传</view>
				</view>
			</view>
		</view>

		<view class="info_div" v-if="item.status == 2 || item.status == 6">
			<view class="item_div_2">
				<view style="display: flex;">
					<view style="color: red;">*</view>订单编号 |
				</view>
				<textarea class="et_2" placeholder="请输入订单编号" @input="onInputOrderSn" :value="item.dy_sn" />
			</view>
			<view class="item_div_2">
				<view>客户要求 |</view>
				<textarea class="et_2" placeholder="请输入客户要求" @input="onInputRemark" :value="item.remark" />
			</view>
		</view>

		<view class="op_btn_div">
			<view class="btn1" @click.stop="onShare">分享</view>
			<view v-if="item.status == 2 || item.status == 6" class="btn2" @click.stop="onOk(3)">通过</view>
			<view v-if="item.status == 2 || item.status == 6" class="btn3" @click.stop="onOk(4)">拒绝</view>
		</view>

		<!-- 占位布局 -->
		<view style="width: 100rpx;height: 40rpx;"></view>

	</view>
</template>

<script>
	// const uploadImage = require('@/util/oss/upload.js')
	const base64 = require('@/util/oss/base64.js')
	const request = require('@/http/request.js')
	const uploadImage = require('@/util/oss/upload.js')
	import { getUInfo, getStatusTxt, timestampToYMDHM, resolveNullStr } from '@/util/util.js'
	import { chooseAndUploadImg } from '@/util/uni_util.js'
	export default {
		data() {
			return {

				item: {}, // 传过来的安装对象

				img_default: '/static/pic_no_img.png',

				img_url_0: '', // 安装前 正面
				img_url_1: '', // 安装前 背面
				img_url_2: '', // 安装后 正面
				img_url_3: '', // 安装后 背面
				img_url_4: '', // 质保卡图
				img_url_5: '', // 赠品图
				img_url_6: '', // 客户微信图
				img_url_7: '', // 核销图

				sales_img: '', // 审核通过时上传的销售单
				audit_img: '', // 审核通过时上传的核销图
				sales1_img: '', // 审核通过时上传的核销图2
				audit1_img: '', // 审核通过时上传的核销图2
			}
		},

		onLoad(opts) {
			this.item = JSON.parse(opts.detail)
			// console.log('opts = ', JSON.stringify(this.item));

			// 解析传过来的图片地址
			if (this.item) {
				if (this.item.after) {
					this.img_url_0 = this.item.after.split(',')[0]
					this.img_url_1 = this.item.after.split(',')[1]
				}
				if (this.item.before) {
					this.img_url_2 = this.item.before.split(',')[0]
					this.img_url_3 = this.item.before.split(',')[1]
				}
				this.img_url_4 = this.item.zb
				this.img_url_5 = this.item.zp
				this.img_url_6 = this.item.wx
				this.img_url_7 = this.item.hx
				this.sales_img = resolveNullStr(this.item.sales_img)
				this.audit_img = resolveNullStr(this.item.audit_img)
				this.sales1_img = resolveNullStr(this.item.sales1_img)
				this.audit1_img = resolveNullStr(this.item.audit1_img)
			}

		},

		methods: {

			// 查看用户评价
			onCheckEvaluate() {
				uni.navigateTo({ url: `/pages/order_detail/evaluate?install_id=${this.item.id}` })
			},

			// 订单编号
			onInputOrderSn(e) {
				this.item.dy_sn = e.detail.value
			},

			// 客户要求
			onInputRemark(e) {
				this.item.remark = e.detail.value
			},

			// 拨打电话
			onPhone(item) {
				if (!item || !item.mobile) {
					uni.showToast({ icon: 'none', title: '号码有误!' })
				}
				uni.makePhoneCall({ phoneNumber: `${item.mobile}` })
			},

			// 上传销售单
			async onUploadSaleImg(type) {
				let res = await chooseAndUploadImg()
				if (type == 2) {
					this.sales1_img = res
				} else {
					this.sales_img = res
				}
			},

			// 上传核销图
			async onUploadAuditImg(type) {
				let res = await chooseAndUploadImg()
				if (type == 2) {
					this.audit1_img = res
				} else {
					this.audit_img = res
				}
			},

			// 查看锁体照片
			onCheckImg(url) {
				if (!url || url.length <= 0 || url == 'null') {
					uni.showToast({ icon: 'none', title: '暂无图片' })
					return
				}
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				});
			},

			// 分享 onShare
			onShare() {
				// console.log('分享.id = ', this.item.id);
				// console.log('分享.base64.id = ', base64.encode(`${this.item.id}`));

				// 安装师傅端的服务器地址
				// const url = 'http://localhost:8080' // 本地测试
				// const url = 'http://localhost:8080' // 昊昀测试
				const url = 'http://install.niuniuhaohan.com' // 正式站

				uni.setClipboardData({
					data: `${url}/#/pages/index/index?id=${base64.encode('' + this.item.id)}`,
					success: () => {
						uni.showModal({
							title: '提示',
							content: '分享内容已复制到剪贴板，请打开『微信』选择好友，『粘帖』后发送给安装人员！请提醒安装人员点击链接『接单』!',
							showCancel: false
						})
					}
				})

			},

			// 业务端为查看图片
			onUploadImg(index) {
				// ['https://hywb.oss-cn-hangzhou.aliyuncs.com/hhsaz/2025-01/23/173759956857669.png']
				let urls = []
				if (index == 0) urls = [this.img_url_0]
				if (index == 1) urls = [this.img_url_1]
				if (index == 2) urls = [this.img_url_2]
				if (index == 3) urls = [this.img_url_3]
				if (index == 4) urls = [this.img_url_4]
				if (index == 5) urls = [this.img_url_5]
				if (index == 6) urls = [this.img_url_6]
				if (index == 7) urls = [this.img_url_7]
				if (index == 8) urls = [this.sales_img]
				if (index == 9) urls = [this.audit_img]
				if (index == 10) urls = [this.sales1_img]
				if (index == 11) urls = [this.audit1_img]

				console.log('查看的图片信息 = ', urls);

				if (!urls || urls.length <= 0 || urls == 'null' || !urls[0] || urls[0] == 'null') {
					uni.showToast({ icon: 'none', title: '暂无图片' })
					return
				}

				uni.previewImage({
					urls: urls,
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				});

			},

			onOk(status) {
				if (status == 3) {
					if (!this.sales_img) {
						uni.showToast({ icon: 'none', title: '请上传『销售单』', duration: 2500 })
						return
					}
					// if (!this.item.dy_sn) {
					// 	uni.showToast({ icon: 'none', title: '请填写抖音单号或销售单号', duration: 2500 })
					// 	return
					// }
					
					console.log(`sales_img = ${this.sales_img} , sales1_img = ${this.sales1_img}`);
					uni.showModal({
						title: '提示',
						content: `是否审核通过？`,
						confirmText: '通过',
						success: (res) => {
							if (res.confirm) {
								this.approve(`${status}`, '', this.sales_img, this.audit_img, this.sales1_img, this.audit1_img, this.item.dy_sn, this.item.remark)
							}
						}
					})
				} else if (status == 4) {
					uni.showModal({
						title: '提示',
						placeholderText: `请填写拒绝原因`,
						editable: true,
						confirmText: '拒绝',
						confirmColor: '#ff0000',
						success: (res) => {
							if (res.confirm) {
								if (!res.content) {
									uni.showToast({ icon: 'error', title: '请填写原因', duration: 2900 })
									return
								}
								this.approve(`${status}`, res.content, '', '', '', '', '', '')
							}
						}
					})
				}

			},

			// 接口:审批
			async approve(status, ye_yj, sales_img, audit_img, sales1_img, audit1_img, dy_sn, remark) {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '处理中', mask: true, })
				let res = await this.$approve({ status, ye_yj, sales_img, audit_img, sales1_img, audit1_img, dy_sn, remark, id: this.item.id })
				console.log('$approve.res =', res);
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: `审核完成。已${status == 3 ? '通过' : '拒绝'}！`,
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
				} else {
					uni.showToast({ icon: 'none', title: res.msg })
				}
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},
			getStatusTxt(status) {
				return getStatusTxt(status)
			},

		}
	}
</script>

<style scoped>
	.install_item {
		display: flex;
		flex-direction: column;
		/* height: 300rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
		/* background-color: rgba(249, 233, 198, 1); */
		/* background-color: rgba(237, 216, 171, 1); */
		/* background-color: rgba(219, 38, 29, 0.3); */
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 16rpx;
		font-size: 30rpx;
		color: black;
	}

	/* 锁体照片 */
	.img_lock {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 0;
	}

	.img_div {
		display: flex;
		width: 100%;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.img_div image {
		width: calc((100% - 152rpx) / 4);
		height: auto;
		min-height: 140rpx;
		aspect-ratio: 1/1;
		border: solid 1rpx lightgray;
		border-radius: 16rpx;
		margin: 0 0 0 20rpx;
	}

	.txt_item {
		width: calc((100% - 48rpx) / 4);
		font-size: 26rpx;
		text-align: center;
		/* background-color: red; */
	}

	.info_div {
		display: flex;
		flex-direction: column;
		/* width: calc(100% - 40rpx);
		margin: 20rpx 20rpx 0 20rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
	}

	/* 大一点的项目容器 */
	.item_div_2 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* line-height: 100rpx; */
		margin: 30rpx 0 0 0;
		font-size: 30rpx;
	}

	.et_2 {
		/* background-color: red; */
		flex-grow: 1;
		margin: 0 0 0 0rpx;
		max-width: 70%;
		height: 100rpx;
		/* line-height: 100rpx; */
		text-align: right;
		font-size: 30rpx;
		/* border: solid 1rpx gray; */
		/* vertical-align: middle; */
	}

	/* 审核上传图片的布局 */
	.app_item_div {
		display: flex;
		flex-direction: column;
		width: calc((100% - 40rpx) / 4);
	}

	.app_item_title {
		margin: 20rpx 0 0 20rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.app_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img_sale_hexiao {
		width: calc((100% - 30rpx));
		height: auto;
		min-height: 140rpx;
		aspect-ratio: 1/1;
		margin: 20rpx 0rpx 0 0rpx;
		border: solid 1rpx lightgray;
		border-radius: 16rpx;
	}

	.app_upload_txt {
		color: deepskyblue;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		padding: 10rpx 0 10rpx 0;
		/* background-color: red; */
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx 0 0rpx 0;
	}

	.btn1 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 0rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: yellowgreen;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn3 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: orangered;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}
</style>